<template>
  <div class="zhtt-smooth-dnd">
    <div class="left">
      <div class="list-group-item">
        <div v-for="i in 10" :key="i"  class="item" ref="containerElement">
          组件 {{i}}
        </div>
      </div>
    </div>
    <div class="right">
    </div>
  </div>
</template>
<!-- setup语法糖 -->
<script setup  lang="ts">
import {onMounted, onUnmounted, ref} from 'vue';
import type {ContainerOptions, SmoothDnD} from 'smooth-dnd'
import { dropHandlers, smoothDnD } from 'smooth-dnd'
const containerElement = ref(null);
let container:SmoothDnD = null as SmoothDnD;

function onDrop(){}
onMounted(() => {
  container = smoothDnD(containerElement.value, {
    onDrop
  });
});
onUnmounted(()=>{
  if(container && container.dispose){
    container.dispose();
  }
})
</script>

<style scoped>
.zhtt-smooth-dnd{
  display: flex;
}
.left{
  width:300px;
  padding: 8px;
  height:100%;
  overflow: auto;
}
.right{
  flex: 1;
}
.item{
  background: #3EAF7C;
  width:80px;
  height:50px;
  color: #fff;
  text-align: center;
  margin-bottom:8px;
}
.list-group-item{
  border:1px solid #003a8c;
}
</style>
